<template>
	<view class="onlineService page-main">
		<view class="title" style="margin-bottom:46rpx;">
			<a @click="$router.back()"><span class="arrowLeft"></span></a>
			<span class="name">{{$t('user.services')}}</span>
			<!-- <span></span> -->
		</view>
		<view class="service">
			<view class="titS">한국어 구역 고객지원</view>
			<view class="content">
				<dl v-for="(item,index) in serviceCN" :key="index">
					<dt>{{item.name}}
					<button type="default" class="joinBtn" @click.stop="handleBtn(item.account)">가입</button></dt>
					<dd>
						<span>{{item.account}}</span>
					</dd>
				</dl>
			</view>
		</view>
		<view class="service">
			<view class="titL">English customer ser</view>
			<view class="content">
				<dl v-for="(item,index) in serviceEN" :key="index">
					<dt>{{item.name}}<button type="default" class="joinBtn" @click.stop="handleBtn(item.account)">Join</button></dt>
					<dd>
						<span>{{item.account}}</span>
						
					</dd>
				</dl>
			</view>
		</view>
	</view>
</template>

<script>
import authMixin from '@/mixins/auth'
import CryptoJS from 'crypto-js'
import { setToken } from '@/utils/auth'
import md5 from 'js-md5'
	export default {
	mixins: [authMixin],
	name: 'login',
		data() {
			return {
				serviceCN:[],
				serviceEN:[],
			}
		},
		methods: {
		  goBack() {
		    this.$router.go(-1)
		  },
		  getList() {
		    let user = localStorage.getItem('user')
		    if (user != undefined && user != null && user != '') {
		      user = JSON.parse(user)
		      let params = {
		        customerId: user.customerId,
		        token: user.token,
		        username: user.username
		      }
		      this.dataList = []
		      this.$api.home.getServers(params).then((res) => {
		        console.log(res)
		        res.data.forEach((item) => {
		          if (item.type != 1) {
		            this.serviceEN.push(item)
		          }else{
					this.serviceCN.push(item)
				  }
		        })
		      })
		    }
		  },
		  handleBtn(url) {
		    window.open(url)
		  }
		},
		mounted() {
		  this.getList()
		},
		created() {}
	}
</script>

<style lang="scss" scoped>
.onlineService {
	a{
		text-decoration: none;
		color: #333;
	}
	padding:0 40rpx;
	position: relative;
	height: 100%;
	background:#fff url('@/static/images/set/setbg.png') no-repeat;
	background-size:100%;
	.title{
		width:100%;
		padding:20rpx;
		// display: flex;
		// justify-content: space-between;
		box-sizing: border-box;
		.arrowLeft{
			display: inline-block;
			background:url(@/static/images/user/left.png) no-repeat 0 10rpx;
			width:50rpx;
			height:50rpx;
			background-size:100%;
		}
		.name{
			font: 500 64rpx/68rpx PingFangSC;
			color: #fff;
			padding-top: 160rpx;
			display: block;
		}
		
	}
	.service{
		width:100%;
		margin:100rpx auto;
		position: relative;
		.titS{
			background:url(@/static/images/onlineService/titBgS.png) no-repeat;
			width:370rpx;
			height:60rpx;
			position: absolute;
			left:23%;
			top:-20rpx;
			background-size:100%;
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight:bold;
			color: #6D50DF;
			line-height:50rpx;
			text-align: center;
			z-index:999;
		}
		.titL{
			position: absolute;
			left:14%;
			top:-20rpx;
			z-index: -1;
			background:url(@/static/images/onlineService/titBgL.png) no-repeat;
			width:500rpx;
			height:60rpx;
			margin: 0 auto;
			background-size:100%;
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: bold;
			color:#6D50DF;
			line-height:60rpx;
			text-align: center;
			z-index:999;
		}
		.content{
			width: 100%;
			overflow: hidden;
			box-sizing: border-box;
			margin:-25rpx auto;
			padding:40rpx;
			background: linear-gradient(180deg, #F9A6E9 0%, #6D50DF 100%);
			border-radius: 40rpx;
			dl{
				width: 100%;
				overflow: hidden;
				margin-top:50rpx;
				dt{
					width:100%;
					height:48rpx;
					line-height:48rpx;
					font-size:28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
					margin-bottom:10rpx;
					span{
						display: inline-block;
						background:url(@/static/images/onlineService/icon.png) no-repeat;
						width:40rpx;
						height:40rpx;
						background-size:100%;
						vertical-align: bottom;
						margin-right:20rpx;
					}
					.joinBtn{
						float: right;
						display: inline-block;
						width:80rpx;
						height: 48rpx;
						background: #FFFFFF;
						border-radius: 10rpx;
						font-size:24rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #6D50DF;
						line-height:48rpx;
						padding:0 5rpx !important;
						text-align: center;
					}
				}
				dd{
					width:100%;
					font-size:26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}
			}
		}
	}
}
</style>
